<!doctype html>
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/Article">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Social Media ShareBar with Fisheye Effect</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
        <link rel="shortcut icon" href="./assets/favicon.ico" />
        <link rel="icon" href="./assets/favicon.ico" type="image/ico">
        <link rel="stylesheet" type="text/css" href="./assets/demo.css" />
        <link rel="stylesheet" type="text/css" href="./assets/sharebar.css" />
        <link rel="publisher" href="https://plus.google.com/113857365337532405020" />
        <link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:600,700' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="./js/sharebar.js"></script>
        <link rel="demo" href="http://demo.dsheiko.com/sharebar" title="Social Media ShareBar with Fisheye Effect" />
        <script src="http://demo.dsheiko.com/share/js/sharebar.js" type="text/javascript"></script>
        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <header role="banner">
            <div>
                <hgroup>
                    <h1>Social Media ShareBar</h1>
                    <h2>...with Fisheye Effect</h2>
                </hgroup>
                <a class="fork" href="http://code.google.com/p/jquery-sharebar/">Fork Me on Google Code</a>
            </div>
        </header>
        <section role="main">
            <div>
                <article>
                    <h2>Introduction</h2>
                    <p>Either you likely provide already sharing buttons to you blog posts or not, you may be interested in this light-weight solution. Why? Because it's fancy, it takes very little space on your page and it is so easy to attach. </p>

                </article>
                <article class="shareArticle">
                    <h1 class="shareLink hidden" data-href="http://demo.dsheiko.com/sharebar">Social Media ShareBar</h1>
                    <h2>Demo</h2>

                    <section class="authorInfo">
                        <address class="author">
                            Posted by <em class="fn"><a title="Posts by Dmitry Sheiko" href="https://plus.google.com/u/0/113857365337532405020/posts">Dmitry Sheiko</a></em>
                        </address> on
                        <time datetime="2011-11-25" class="published updated">November 25th, 2011</time>
                        <span class="shareBar"><!-- Sharebar placeholder--></span>
                    </section>

                </article>

                <article>
                    <h2>Usage and API</h2>
                    <p>Well, just download the Sharebar source code and extract the archive into a folder in you project. Well, just download the Sharebar source code and extract the archive into a folder in you project. I assume you use jQuery, so just add to the code of your blog pages:</p>

                    <textarea rows="3" class="code">
<link rel="stylesheet" type="text/css" href="./assets/sharebar.css" />
<script type="text/javascript" src="./js/sharebar.js"></script>
                    </textarea>
                    <p>Now you have to only mark with classes outer boxes for your articles, article title nodes and put placeholder for share bar. For example, when you want share bars next to blog posts in the list:</p>
                    <textarea rows="11" class="code">
 <li class="shareArticle">
    <a class="shareLink" href="http://article-link.com">A title</a>
    <span class="shareBar"><!-- Sharebar placeholder--></span>
    <p>Article overview</p>
</li>
<li class="shareArticle">
    <a class="shareLink" href="http://article-link.com">A title</a>
    <span class="shareBar"><!-- Sharebar placeholder--></span>
    <p>Article overview</p>
</li>
                    </textarea>
                    <p>When you want the bar on the post details page:</p>
                    <textarea rows="6" class="code">
<div class="shareArticle">
    <h2 class="shareLink" data-href="http://article-link.com">A title</h2>
    <span class="shareBar"><!-- Sharebar placeholder--></span>
    <p>text</p>
</div>
                    </textarea>
                    <p>Link info node can keep the shared article link either in href attribute or in data container data-href. </p>
                </article>

                <div class="download">
                    <a class="btn btn-inverse btn-large" href="http://code.google.com/p/jquery-sharebar/downloads/list">Download the latest version from GitHub</a>
                </div>
            </div>
        </section>
        <footer>
            <article>
                <p><var>sharebar.js</var> is created by <a href="http://dsheiko.com">Dmitry Sheiko</a>.
                    It's released under the GPLv2 license. </p>
                <p>If you have any questions or feedback you can use the <a href="http://code.google.com/p/jquery-sharebar/">google code project page.</a>
                </p>
            </article>
        </footer>

</body>
</html>